import { AppBar, Toolbar, Button, IconButton, useTheme, Box, Avatar, Typography, Skeleton, Menu, MenuItem } from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import api from '../services/api';

export default function PersonalNavbar() {
  const [anchorEl, setAnchorEl] = useState(null);
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const theme = useTheme();

  // 组件挂载时获取用户信息
  useEffect(() => {
    const fetchUserInfo = async () => {
      try {
        const data = await api.getUser('1');
        setUser(data);
      } catch (error) {
        console.error('获取用户信息失败:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchUserInfo();
  }, []);

  const handleMenu = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <AppBar 
      position="block"
      sx={{
        background: 'rgba(255,255,255,.1)',
        color: theme.palette.text.primary,
        marginBottom: 4,
        boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
      }}
    >
      <Toolbar sx={{ display: 'flex', justifyContent: 'space-between' }}>
        {/* 移动端菜单按钮 */}
        <IconButton
          size="large"
          edge="start"
          color="inherit"
          aria-label="menu"
          sx={{ mr: 2, display: { md: 'none' } }}
          onClick={handleMenu}
        >
          <MenuIcon />
        </IconButton>

        {/* 桌面端导航链接 */}
        <Box sx={{ display: { xs: 'none', md: 'flex' }, gap: 4 }}>
          <Button 
            component={Link} 
            to="/" 
            variant="text" 
            color="inherit"
            sx={{ fontWeight: 600 }}
          >
            首页
          </Button>
          <Button 
            component={Link} 
            to="/projects" 
            variant="text" 
            color="inherit"
            sx={{ fontWeight: 600 }}
          >
            作品
          </Button>
          <Button 
            component={Link} 
            to="/about" 
            variant="text" 
            color="inherit"
            sx={{ fontWeight: 600 }}
          >
            关于
          </Button>
        </Box>

        {/* 右侧用户信息和下载按钮 */}
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
          {/* 用户信息显示 */}
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              gap: 1,
              height: '80%',
              px: 2,
              borderRadius: '8px',
              transition: 'all 0.3s ease',
              '&:hover': {
                backgroundColor: '#f0f0f0',
              }
            }}
          >
            {loading ? (
              <Skeleton variant="circular" width={36} height={36} />
            ) : (
              <Avatar sx={{ width: 36, height: 36 }} alt={user?.name}>
                {user?.name?.charAt(0)} 
              </Avatar>
            )}
            {!loading && user && (
              <Typography variant="body2" sx={{ display: { xs: 'none', md: 'block' } }}>
                {user.name}
              </Typography>
            )}
          </Box>

          <Button
            variant="contained"
            color="primary"
            sx={{
              fontWeight: 600,
              borderRadius: '24px',
              px: 4,
              height: '40px',
              boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
              transition: 'all 0.3s ease',
              '&:hover': {
                boxShadow: '0 4px 8px rgba(0, 0, 0, 0.15)',
                transform: 'translateY(-1px)',
              },
              '&:active': {
                transform: 'translateY(0)',
              }
            }}
          >
            下载简历
          </Button>
        </Box>
      </Toolbar>

      {/* 移动端菜单 */}
      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={handleClose}
        sx={{ display: { md: 'none' } }}
      >
        <MenuItem component={Link} to="/" onClick={handleClose}>首页</MenuItem>
        <MenuItem component={Link} to="/projects" onClick={handleClose}>作品</MenuItem>
        <MenuItem component={Link} to="/about" onClick={handleClose}>关于</MenuItem>
      </Menu>
    </AppBar>
  );
}
